import * as PIXI from 'pixi.js'
import { PixiComponent } from '@inlet/react-pixi'

export default PixiComponent('GuideLine', {
  create: () => new PIXI.Graphics(),
  didMount: () => {},
  willUnmount: () => {},
  applyProps: (instance, oldProps, newProps) => {
    instance.clear()
    const {
      width, height, scale, x, y,
    } = newProps

    const lineH = 2 / scale
    // white liens
    if (x >= 0 && x <= width && y >= 0 && y <= height) {
      instance.lineStyle(4 / scale, 0x000000, 0.5)

      // hor
      instance.moveTo(0, y - lineH)
      instance.lineTo(width, y - lineH)
      instance.closePath()
      // ver
      instance.moveTo(x - lineH, 0)
      instance.lineTo(x - lineH, height)
      instance.closePath()

      // black liens
      instance.lineStyle(4 / scale, 0xffffff, 0.5)

      // hor
      instance.moveTo(0, y + lineH)
      instance.lineTo(width, y + lineH)
      instance.closePath()
      // ver
      instance.moveTo(x + lineH, 0)
      instance.lineTo(x + lineH, height)
      instance.closePath()
    }
  },
})
